<template>
    <div>
        <headerComponent></headerComponent>
        <div style="width: 1200px;margin: 0 auto;padding-bottom: 100px">
            <el-card>
                <el-page-header @back="goBack" content="编辑信息"></el-page-header>
            </el-card>
            <el-card>
                <div class="update">
                    <el-form
                            label-position="top"
                            ref="updateForm"
                            :model="form"
                            :rules="formRules"
                            label-width="100px"
                    >
                        <div>
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-form-item :required="true" label="您报读的培训机构">
                                        <el-input
                                                size="small"
                                                :disabled="true"
                                                v-model="form.org.org_name"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="form.exam_org" :span="5">
                                    <el-form-item :required="true" label="您报考的培训机构">
                                        <el-input
                                                size="small"
                                                :disabled="true"
                                                v-model="form.exam_org.org_name"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-form-item :required="true" :label="form.exam_org ? '您报考的级别':'您报读的级别'">
                                        <el-input
                                                size="small"
                                                :disabled="true"
                                                v-model="form.course.name"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <div v-if="form.state_code >= 4">
                                    <el-col :span="5">
                                        <el-form-item :required="true" label="考试形式">
                                            <el-select
                                                    style="width: 100%"
                                                    size="small"
                                                    v-model="form.exam_city"
                                                    placeholder="请选择考试形式"
                                            >
                                                <el-option
                                                        v-for="item in examCityOptions"
                                                        :key="item.id"
                                                        :label="item.exam_city"
                                                        :value="item.exam_city"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="exam_date" label="考试时间">
                                            <el-select
                                                    style="width: 100%"
                                                    size="small"
                                                    v-model="form.exam_date"
                                                    placeholder="请选择考试时间"
                                            >
                                                <el-option
                                                        v-for="item in examDateOptions"
                                                        :key="item.id"
                                                        :label="item.exam_date"
                                                        :value="item.id"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </div>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-form-item prop="name" label="学员姓名">
                                        <el-input
                                                size="small"
                                                :disabled="true"
                                                v-model="form.name"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item :required="true" prop="phone" label="手机号码">
                                        <el-input
                                                size="small"
                                                :disabled="true"
                                                v-model="form.phone"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="form.exam_org" :span="5">
                                    <el-form-item :required="true" prop="exam_org" align="left" label="是否属于再次报考">
                                        <el-tag size="small">{{ form.exam_count > 0 ? '是' : '否' }}</el-tag>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-form-item prop="last_py" label="姓拼音">
                                        <el-input
                                                onblur="this.value=this.value.toUpperCase()"
                                                size="small"
                                                v-model="form.last_py"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="first_py" label="名拼音">
                                        <el-input
                                                onblur="this.value=this.value.toUpperCase()"
                                                size="small"
                                                v-model="form.first_py"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item :required="true" label="性别">
                                        <el-radio-group
                                                :disabled="true"
                                                v-model="form.gender"
                                        >
                                            <el-radio label="m">男</el-radio>
                                            <el-radio label="f">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-form-item prop="card_type" label="证件类型">
                                        <el-select
                                                style="width: 100%"
                                                size="small"
                                                :disabled="true"
                                                v-model="form.card_type"
                                                placeholder="请选择证件类型"
                                        >
                                            <el-option
                                                    v-for="item in cardOptions"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="card_id" label="证件号码">
                                        <el-input
                                                size="small"
                                                :disabled="true"
                                                v-model="form.card_id"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="birthday" label="出生日期">
                                        <el-date-picker
                                                style="width: 100%"
                                                size="small"
                                                :disabled="true"
                                                format="yyyy 年 MM 月 dd 日"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期"
                                                v-model="form.birthday"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-form-item prop="hig_edu" label="最高学历">
                                        <el-select
                                                style="width: 100%"
                                                size="small"
                                                :disabled="true"
                                                v-model="form.hig_edu"
                                                placeholder="最高学历"
                                        >
                                            <el-option
                                                    label="硕士研究生"
                                                    value="硕士研究生"
                                            ></el-option>
                                            <el-option label="博士" value="博士"></el-option>
                                            <el-option label="本科" value="本科"></el-option>
                                            <el-option label="大专" value="大专"></el-option>
                                            <el-option
                                                    label="中专/职技校"
                                                    value="中专/职技校"
                                            ></el-option>
                                            <el-option label="高中" value="高中"></el-option>
                                            <el-option label="其他" value="其他"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="major" label="相关专业">
                                        <el-select
                                                style="width: 100%"
                                                size="small"
                                                :disabled="false"
                                                v-model="form.major"
                                                placeholder="相关专业"
                                        >
                                            <el-option label="人力资源管理" value="人力资源管理"></el-option>
                                            <el-option label="工商管理" value="工商管理"></el-option>
                                            <el-option label="行政管理" value="行政管理"></el-option>
                                            <el-option label="会计" value="会计"></el-option>
                                            <el-option label="财政、税务" value="财政、税务"></el-option>
                                            <el-option label="财务管理" value="财务管理"></el-option>
                                            <el-option label="其他" value="其他"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="!(form.hig_edu && form.hig_edu.includes('在读'))" :span="5">
                                    <el-form-item prop="grad_time" label="毕业年份">
                                        <el-date-picker
                                                size="small"
                                                style="width: 100%"
                                                format="yyyy 年 MM 月"
                                                :clearable="false"
                                                value-format="yyyy-MM-dd"
                                                type="month"
                                                placeholder="选择日期"
                                                v-model="form.grad_time"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">

                                <el-col :span="6">
                                    <el-form-item prop="com_name" label="单位名称">
                                        <el-input
                                                size="small"
                                                v-model="form.com_name"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item prop="province" label="工作区域">
                                        <el-cascader
                                                style="width: 100%!important;"
                                                size="small"
                                                :options="areaOptions"
                                                v-model="selectedOptionsUpdate"
                                                @change="addressChange"
                                        >
                                        </el-cascader>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">

                                <el-col :span="6">
                                    <el-form-item prop="com_type" label="单位类型">
                                        <el-select
                                                style="width:100%; margin-right: 20px"
                                                size="small"
                                                v-model="form.com_type"
                                                placeholder="请选择单位类型"
                                        >
                                            <el-option
                                                    v-for="item in com_typeList"
                                                    :key="item.value"
                                                    :label="item.name"
                                                    :value="item.value"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item prop="work_duty" label="职务">
                                        <el-select
                                                style="width: 420px; margin-right: 20px"
                                                size="small"
                                                :disabled="true"
                                                v-model="form.work_duty"
                                                placeholder="请选择职务"
                                        >
                                            <el-option
                                                    v-for="item in work_dutyList"
                                                    :key="item.value"
                                                    :label="item.value.split('#')[0]"
                                                    :value="item.value"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item prop="ind_type" label="行业类型">
                                        <el-select
                                                style="width:100%; margin-right: 20px"
                                                size="small"
                                                v-model="form.ind_type"
                                                placeholder="请选择行业类型"
                                        >
                                            <el-option
                                                    v-for="item in ind_typeList"
                                                    :key="item.value"
                                                    :label="item.name"
                                                    :value="item.value"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item prop="cert" label-width="120px" label="相关资质或证书">
                                        <el-select
                                                size="small"
                                                :disabled="true"
                                                style="width: 420px; margin-right: 20px"
                                                v-model="form.cert"
                                                placeholder="请选择"
                                        >
                                            <el-option
                                                    v-for="item in certDisplayOptions"
                                                    :key="item.id"
                                                    :label="item.value"
                                                    :value="item.value"
                                            >
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item prop="email" label="电子邮箱">
                                        <el-input
                                                size="small"
                                                v-model="form.email"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
<!--                                    <span style="position: absolute;top:30%;font-size:2px">考生从事薪酬管理（含薪税服务）的工作年限（含实习经历）以首次培训报名所填写的年数为准</span>-->
                                    <el-form-item prop="work_age" label-width="auto">
                                        <span style="display: inline-block;font-size: 14px;color: #606266;line-height: 40px;"><span style="color: red">*</span>
                                            从事薪酬管理（含薪税服务）工作年限（含实习经历）
                                        <el-tooltip v-if="form.state_code >= 4" content="考生从事薪酬管理（含薪税服务）的工作年限（含实习经历）以首次培训报名所填写的年数为准" placement="top" effect="light">
                                          <el-tag v-if="form.state_code >= 4" style="cursor: pointer" size="mini">提示</el-tag>
                                        </el-tooltip>
                                        </span>
                                        <el-input
                                                size="small"
                                                type="number"
                                                :disabled="true"
                                                v-model="form.work_age"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-form-item class="updateButton">
                                    <el-button size="small" type="primary" @click="editContent"
                                    >立即修改
                                    </el-button
                                    >
                                </el-form-item>
                            </el-row>
                        </div>
                    </el-form>
                </div>
            </el-card>
        </div>
        <footerComponent></footerComponent>
    </div>
</template>

<script>
    import headerComponent from '@/components/headerComponent'
    import footerComponent from '@/components/footerComponent'
    import {areaData, textToCode, codeToText} from "@/utils/JdAreaData/areaData";
    import {editData, exam_data_list, profile} from "@/request/api";
    import {cert_list, work_duty_list} from "../../../assets/staticList";
    import {generate_contract_func, userExtSign_func, userExtSignFun} from "../genrate_contract_fun";

    export default {
        name: "index",
        data() {
            var province_rule_update = (rule, value, callback) => {
                console.log("工作区域验证函数", value);
                if (this.form.province === "" || this.form.province == null) {
                    callback(new Error("请选择工作区域"));
                } else {
                    callback();
                }
            };
            //邮箱表单验证
            var email_rule = (rule, value, callback) => {
                let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if (value === "") {
                    callback(new Error("请填写电子邮箱"));
                } else if (!reg.test(value)) {
                    callback(new Error("电子邮箱格式错误"));
                } else {
                    callback();
                }
            };
            var first_py_rule = (rule, value, callback) => {
                let reg = /^[A-Z,a-z]+$/;
                if (value === "") {
                    callback(new Error("请填写名拼音"));
                } else if (!reg.test(value)) {
                    callback(new Error("格式错误"));
                } else {
                    callback();
                }
            };
            var last_py_rule = (rule, value, callback) => {
                let reg = /^[A-Z,a-z]+$/;
                if (value === "") {
                    callback(new Error("请填写姓拼音"));
                } else if (!reg.test(value)) {
                    callback(new Error("格式错误"));
                } else {
                    callback();
                }
            };
            //根据不同证件类型不同表单验证
            var card_id_rule = (rule, value, callback) => {
                if (this.form.card_type == 1) {
                    let reg =
                        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                    if (value === "") {
                        callback(new Error("请填写身份证号码"));
                    } else if (!reg.test(value)) {
                        callback(new Error("身份证格式错误"));
                    } else {
                        callback();
                    }
                } else if (this.form.card_type == 2) {
                    let reg = /^[A-Z,a-z,\d]+$/;
                    if (value === "") {
                        callback(new Error("请填写护照"));
                    } else if (!reg.test(value)) {
                        callback(new Error("护照格式错误"));
                    } else {
                        callback();
                    }
                } else if (this.form.card_type == 3) {
                    let reg = /^[A-Z,a-z,\d]+$/;
                    if (value === "") {
                        callback(new Error("请填写港澳台胞证"));
                    } else if (!reg.test(value)) {
                        callback(new Error("证件格式错误"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            //手机号码表单验证
            var phoneRule = (rule, value, callback) => {
                let phoneRule = /^1[23456789]\d{9}$/;
                if (value === "") {
                    callback(new Error("请输入手机号码"));
                } else if (!phoneRule.test(value)) {
                    callback(new Error("手机号码格式错误"));
                } else {
                    callback();
                }
            };
            return {
                examCityOptions: [], //考试城市
                examDateOptions: [], //考试时间
                cardOptions: [
                    {id: 1, name: "居民身份证"},
                    {id: 2, name: "护照"},
                    {id: 3, name: "港澳台胞身份证"},
                ], //证件类型字典
                form: {
                    exam_org_code: "",
                    ind_type: "",
                    com_type: "",
                    province: "",
                    work_duty: "",
                    course: {
                        course_name: ''
                    },
                    org: {
                        org_name: ""
                    }
                }, //编辑表单
                formRules: {
                    province: [
                        {
                            required: true,
                            validator: province_rule_update,
                            trigger: "change",
                        },
                    ],
                    cert: [{required: true, message: "请选择相关资质或证书", trigger: "change"}],
                    email: [{required: true, validator: email_rule, trigger: "blur"}],
                    name: [{required: true, message: "请输入用户名", trigger: "blur"}],
                    first_py: [
                        {required: true, validator: first_py_rule, trigger: "blur"},
                    ],
                    last_py: [{required: true, validator: last_py_rule, trigger: "blur"}],
                    card_type: [
                        {required: true, message: "请选择证件类型", trigger: "change"},
                    ],
                    card_id: [{required: true, validator: card_id_rule, trigger: "blur"}],
                    birthday: [
                        {
                            required: true,
                            message: "请输入出生年月",
                            trigger: "blur",
                        },
                    ],
                    address: [
                        {
                            required: true,
                            message: "请输入家庭住址",
                            trigger: "blur",
                        },
                    ],
                    org_code: [
                        {required: true, message: "请输入机构代码", trigger: "blur"},
                    ],
                    school: [
                        {required: true, message: "请输入学校名称", trigger: "blur"},
                    ],
                    grad_time: [
                        {required: true, message: "请填写毕业年份", trigger: "change"},
                    ],
                    hig_edu: [
                        {required: true, message: "请填写最高学历", trigger: "blur"},
                    ],
                    major: [{required: true, message: "请输入专业门类", trigger: "blur"}],
                    com_name: [
                        {required: true, message: "请输入单位名称", trigger: "blur"},
                    ],
                    work_duty: [
                        {required: true, message: "请选择现有职务", trigger: "blur"},
                    ],
                    ind_type: [
                        {required: true, message: "请选择行业类型", trigger: "blur"},
                    ],
                    com_type: [
                        {required: true, message: "请选择单位类型", trigger: "blur"},
                    ],
                    city: [
                        {required: true, message: "请填写工作区域", trigger: "change"},
                    ],
                    work_duty_en: [
                        {required: true, message: "请输入现有职务英文", trigger: "blur"},
                    ],
                    work_title: [
                        {required: true, message: "请输入现有职称", trigger: "blur"},
                    ],
                    work_age: [
                        {required: true, message: "请填写从业年限", trigger: "blur"},
                    ],
                    course: [
                        {required: true, message: "请输入考试级别", trigger: "blur"},
                    ],
                    exam_date: [
                        {required: true, message: "请填写考试时间", trigger: "change"},
                    ],
                    exam_city: [
                        {required: true, message: "请填写考试形式", trigger: "change"},
                    ],
                    is_train: [
                        {required: true, message: "请选择是否参加培训", trigger: "change"},
                    ],
                    photo: [{required: true, message: "请上传证件照", trigger: "blur"}],
                    phone: [{validator: phoneRule, trigger: "blur"}],
                    code: [
                        {required: true, message: "请输入手机验证码", trigger: "blur"},
                    ],
                }, //编辑表单验证
                areaOptions: areaData, //省市区三级联动
                selectedOptionsUpdate: [], //修改的 省市区
                ind_typeList: [
                    {value: 1, name: '人力资源与人力资本服务'},
                    {value: 2, name: '集成电路'},
                    {value: 3, name: '人工智能'},
                    {value: 4, name: '软件与平台'},
                    {value: 5, name: '生命科学'},
                    {value: 6, name: '生物医药'},
                    {value: 7, name: '医疗保健'},
                    {value: 8, name: '航空与航天'},
                    {value: 9, name: '汽车'},
                    {value: 10, name: '化工'},
                    {value: 11, name: '工业产品和服务'},
                    {value: 12, name: '消费品'},
                    {value: 13, name: '能源和自然资源'},
                    {value: 14, name: '金融'},
                    {value: 15, name: '基础建设和建筑产品'},
                    {value: 16, name: '机械和设备'},
                    {value: 17, name: '媒体'},
                    {value: 18, name: '金属和矿业'},
                    {value: 19, name: '私募基金'},
                    {value: 20, name: '零售'},
                    {value: 21, name: '高科技'},
                    {value: 22, name: '电信'},
                    {value: 23, name: '公用事业'},
                    {value: 24, name: '教育'},
                    {value: 25, name: '文化'},
                    {value: 26, name: '其他'},
                    {value: 27, name: '无'}
                ],
                com_typeList: [
                    {name: "事业单位", value: 1},
                    {name: "人力资源服务机构", value: 2},
                    {name: "会计（税务,律师）事务所", value: 3},
                    {name: "其他中介机构", value: 4},
                    {name: "金融机构（银行,证券,保险,信托,基金等）", value: 5},
                    {name: "院校", value: 6},
                    {name: "其他", value: 7},
                ],
                work_dutyList: work_duty_list,
                certDisplayOptions: cert_list,
                formCopy:null
            }
        },
        methods: {
            goBack() {
                console.log('返回主页')
                this.$router.push({path: '/user'})
            },
            //获取考试时间
            examDataList(course_id) {
                exam_data_list(course_id).then(res => {
                    console.log('考试时间', res);
                    this.examCityOptions = res
                    this.examDateOptions = res
                    this.form.exam_city = res[0].exam_city;
                    this.form.exam_date = res[0].id;
                })
            },
            //修改信息
            editContent() {
                this.$refs["updateForm"].validate((valid) => {
                    if (valid) {
                        console.log('修改表单数据', this.form)
                        this.form.pid = this.form.id;
                        this.form.first_py = this.form.first_py.toLocaleUpperCase()
                        this.form.last_py = this.form.last_py.toLocaleUpperCase()
                        editData(this.form).then(async res => {
                            console.log(res);
                            this.$message({type: 'success', message: '修改成功'})
                            console.log('this.form.state',this.form.state_code)
                            if(this.form.state_code >= 4){
                                this.form.exam_date = this.formCopy.exam_date
                                await generate_contract_func(this.form)
                                userExtSign_func(this.form)
                            }else{
                                this.$router.push('/user')
                            }
                        }).catch(err => {
                            this.$message({type: 'error', message: err.msg})
                        })
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            //获取省市区
            addressChange(arr) {
                [this.form.province, this.form.city, this.form.region] = codeToText(arr);
            },
            currentUpdate(pid) {
                profile({pid: pid}).then(res => {
                    console.log('当前修改的表单', res)
                    this.formCopy = JSON.parse(JSON.stringify(res[0]))
                    this.form = res[0];
                    this.examDataList(this.form.course.id);
                    this.selectedOptionsUpdate = textToCode([this.form.province, this.form.city, this.form.region])
                })
            },
        },
        created() {
            console.log('当前档案id', this.$route.params.update_id);
            this.currentUpdate(this.$route.params.update_id)
            window.scrollTo(0, 0);
        },
        components: {
            headerComponent,
            footerComponent
        }
    }
</script>

<style scoped>
    .update {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 100px;
    }
</style>
